<template>
    <div class="bookDetail">
        <div class="bookDetail-s" v-if="detail.fiction">
            <div class="bookTop">
                <van-image :src="detail.fiction.image" height="140" width="110">
                    <template v-slot:error>
                        <van-image src="http://www.fyhuabo.com/images/nopic.gif" height="100%" width="100%"></van-image>
                    </template>
                </van-image>
                <div class="name">
                    <div class="fictionName">{{ detail.fiction.fictionName }}</div>
                    <div class="fictionAuthor" @click="$router.push('/search?type=0&key=' + detail.fiction.fictionAuthor)">
                        {{ detail.fiction.fictionAuthor }}<van-icon name="arrow" />
                    </div>
                    <div class="fictionLabel">{{ detail.fiction.fictionLabel }}</div>
                    <div class="updateTime">最近更新：{{ dayjs(detail.fiction.updateTime).format('YYYY/MM/DD') }}</div>
                </div>
            </div>
            <div class="content">
                <div class="fictionInfo">
                    <div v-html="htmlFrom(detail.fiction.fictionInfo)"></div>
                </div>
                <!-- <hr> -->
                <van-tabs v-model="active" @change="change" swipeable animated>
                    <van-tab title="同类作品">
                        <div class="similarList">
                            <van-grid :border="false">
                                <van-grid-item :to="'/bookDetail?id=' + item.fictionId" v-for="(item,index) in detail.similarFiction" :key="index">
                                    <van-image height="100" :src="item.image"/>
                                    <div class="similarListName">
                                        <div class="van-multi-ellipsis--l2">{{ item.fictionName }}</div>
                                    </div>
                                </van-grid-item>
                            </van-grid>
                        </div>
                        <br><br><br><br>
                    </van-tab>
                    <van-tab :title="'目录（' + detail.fictionChapters.length + '章）'">
                        <fictionChapters :fictionChapters="detail.fictionChapters"/>
                        <br><br><br><br>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="fiex-bottom">
                <div class="bookshelf" @click="bookshelf">
                    <div :class="{
                        icon : true,
                        addBookshelf : !detail.isBookshelf,
                        addBookshelf_o : detail.isBookshelf
                    }"></div>
                    <div class="text" :style="{color: detail.isBookshelf ? '#bfbfbf' : '#2c2c2c'}">
                        {{ detail.isBookshelf ? '已加入书架' : '加入书架'}}
                    </div>
                </div>
                <van-button round type="danger" @click="startRead">开始阅读</van-button>
            </div>
        </div>
        <LoadAnimation :load="Load" color="#fff"/>
    </div>
</template>

<script>
import fictionChapters from '@/components/book/fictionChapters.vue'
import { mapState, mapMutations } from 'vuex'
import { getFictionShelfAdd, getFictionShelfDel } from '@/api/fictionShelf'
import { getFictionDetail } from '@/api/fiction'
import { htmlFrom } from '@/assets/js/Tools'
import dayjs from 'dayjs'
export default {
    components : {
        fictionChapters
    },
    data() {
        return {
            detail : {},
            Load : false,
            active : 0,
            bookshelfColor : '#2c2c2c'
        }
    },
    created(){
        this.getDetail()
    },
    watch:{
        $route(to,from){
            if(to.path == '/bookDetail'){
                this.getDetail()
            }
        }
    },
    methods : {
        htmlFrom,
        dayjs,

        ...mapMutations(['getFictionShelfList']),

        // 开始阅读
        startRead(){
            this.$router.push({
                path : '/bookRead',
                query : {
                    fid : this.detail.fiction.fictionId,
                    chapterNum : this.detail.fictionChapters[0].chapterNum,
                    cid : this.detail.fictionChapters[0].fictionChapterId,
                    fName : this.detail.fiction.fictionName
                }
            })
        },
        
        // 获取小说详细信息
        getDetail(){
            this.Load = true
            getFictionDetail(parseInt(this.$route.query.id)).then(res => {
                this.Load = false
                if(res.code == 200){
                    this.detail = res.data
                }
            }).catch(e => {
                this.$router.go(-1)
            })
        },

        change(){},

        // 加入书架
        bookshelf(){
            if(this.detail.isBookshelf){
                getFictionShelfDel({
                    fid : this.detail.fiction.fictionId,
                    type : 'fiction_shelf'
                }).then(res => {
                    if(res.code == 200){
                        this.detail.isBookshelf = false
                        this.$toast.success('移除成功')
                        this.getFictionShelfList()
                    }
                })
            }else{
                let fcId = this.detail.fictionChapters && this.detail.fictionChapters[0]
                getFictionShelfAdd({
                    fid : this.detail.fiction.fictionId,
                    type : 'fiction_shelf',
                    fcId : fcId ? fcId.fictionChapterId : -1,
                    num : fcId ? fcId.chapterNum : -1,
                }).then(res => {
                    if(res.code == 200){
                        this.detail.isBookshelf = true
                        this.$toast.success('加入成功')
                        this.getFictionShelfList()
                    }
                })
            }
        },
    }
}
</script>

<style scoped>
.bookDetail{
    width: 100%;
    height: calc(100% - 46px);
    position: relative;
    background: #000;
}
.bookDetail-s{
    width: 100%;
    height: calc(100%);
    position: relative;
}
/*  */
.bookTop{
    position: relative;
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 图片 */
.bookTop >>> .van-image{
    border-radius: 10px;
    overflow: hidden;
}
.bookTop .name{
    width: calc(100% - 200px);
    margin-left: 10px;
    line-height: 20px;
    color: #fff;
}
.bookTop .name .fictionName{
    font-size: 18px;
    font-weight: 900;
    line-height: 40px;
}
.bookTop .name .fictionAuthor{
    font-size: 13px;
}
.bookTop .name .fictionLabel{
    color: #999;
}
.bookTop .name .updateTime{
    color: #777;
}
.bookTop >>> .van-image__img{
}

/* info信息 */
.content{
    width: 100%;
    min-height: calc(100% - 200px);
    background: #fff;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.content .fictionInfo{
    padding: 20px 10px;
    font-size: 14px;
}
.content .fictionInfo div{
    color: #555;
}

.fiex-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: 52px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.fiex-bottom >>> .van-button{
    position: absolute;
    top: 4px;
    padding: 0 50px !important;
    right: 20px;
}

/* 加入书架 */
.bookshelf{
    position: absolute;
    left: 20px;
    top: 4px;
    width: 140px;
    height: 44px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bookshelf .text{

}
.bookshelf .icon{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

/* 同类作品 */
.similarList{
    padding: 20px 10px;
}
.similarList >>> .van-image{
    border-radius: 5px;
    overflow: hidden;
}
.similarListName{
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    height: 40px;
}
</style>